<template>
    <div>
        <h1>员工管理</h1>
        <div>
            <tr>
                <td>姓名</td>
                <td>
                    <input type="text" v-model="info.name">
                </td>
                    <td align="right">角色</td>
                    <td>
                        <select v-model="info.tid">
                            <option value="">请选择</option>
                            <option :value="item.Tid" v-for="item in gettype">{{ item.Tname }}</option>
                        </select>
                    </td>
                    <td>
                        <input type="button" value="查询" class="btn btn-info" @click="getuser">
                        <input type="button" value="批量禁用" class="btn btn-danger" @click="AllDel(false)">
                        <input type="button" value="批量启用" class="btn btn-success" @click="AllDel(true)">
                    </td>
            </tr>
        </div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>
                        <input type="checkbox" v-model="checked" @change="Quan">
                    </td>
                    <td>编号</td>
                    <td>姓名</td>
                    <td>角色</td>
                    <td>电话</td>
                    <td>备注</td>
                    <td>日期</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list":key="item.Uid">
                    <td>
                        <input type="checkbox" v-model="checkeds" :value="item.Uid">
                    </td>
                    <td>{{ item.UBhao }}</td>
                    <td>{{ item.Uname }}</td>
                    <td>{{ item.Tname }}</td>
                    <td>{{ item.Uphone }}</td>
                    <td>{{ item.Uders }}</td>
                    <td>{{ item.Udate.substring(0,10) }}</td>
                    <td>{{ item.Ustate?"启用":"禁用" }}</td>
                    <td>
                        <input type="button" value="删除" class="btn btn-danger" @click="delUse(item.Uid)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <span>共{{ data.totalCount }}条</span>
        <span>每页{{ info.pageSize }}条</span>
        <span>当前{{ info.pageIndex }}/{{ data.totalPage }}页</span>
        
        <input type="button" value="首页" @click="goPage(1)">
        <input type="button" value="上一页" @click="goPage(info.pageIndex-1)">
        <input type="button" :value="item" v-for="item in data.totalPage" @click="goPage(item)">
        <input type="button" value="下一页" @click="goPage(info.pageIndex+1)">
        <input type="button" value="尾页" @click="goPage(data.totalPage)">
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import axios from 'axios'
import { useRoute,useRouter } from 'vue-router';
import moment from 'moment';
const router = useRouter();
const route = useRoute();


const AllDel=(state:any)=>{
    if(checkeds.value.length==0)
{
    alert("必须一项");
}
var f = confirm("确定批量修改吗?");
    if(f)
{
    axios({
        url:"/api/Use/AllUpdateState",
        method:"put",
        params:{
            checkeds:checkeds.value.toString(),
            state :state
        }
    })
    .then((res)=>{
        console.log(res);
        if(res.data>0)
    {
        alert("批量修改成功");
        getuser();
        checkeds.value=false;
        checked.value=false;
        return;
    }
    else
    {
        alert("批量修改失败");
        checkeds.value.length=false;
        checked.value=false;
        return;
    }
    })
    .catch((err)=>{
        console.log(err);
    })
}

}

let checked:any = ref(false);
let checkeds:any = ref([]);

const Quan=()=>{
    if(checked.value)
{
    checkeds.value = data.list.map((item:any)=>{
        return item.Uid;
    })
}
else
{
    checkeds.value = [];
    return;
}
}
const goPage=(num:any)=>{
    if(num<1)
{
    num = 1;
    return;
}
else if(num>data.totalPage)
{
    num = data.totalPage;
    return;
}
info.pageIndex = num;
getuser();
}

let info:any=reactive({
    pageIndex:1,
    pageSize:2,
    name:"",
    tid:""
})

let data:any=reactive({
    list:[],
    totalCount:"",
    totalPage:""
})

const delUse=(id:any)=>{
    var f = confirm("确认删除吗");
    if(f)
{
    axios({
        url:"/api/Use/DelUse",
        method:"delete",
        params:{
            id:id
        }
    })
    .then((res)=>{
        console.log(res);
        if(res.data>0)
    {
        alert("删除成功");
        getuser();
        return;
    }
    else
    {
        alert("删除失败");
        return;
    }
    })
    .catch((err)=>{
        console.log(err);
    })
}
}

onMounted(()=>{
    getuser();
    GetTypeXl();
})
let gettype:any=ref([]);

const GetTypeXl=()=>{
    axios({
        url:"/api/Use/GetType",
        method:"get"
    })
    .then((res)=>{
        console.log(res);
        gettype.value = res.data;
    })
    .catch((err)=>{
        console.log(err);
    })
}

const getuser=()=>{
    axios({
        url:"/api/Use/GetUse",
        method:"get",
        params:info
    })
    .then((res)=>{
        console.log(res);
        Object.assign(data,res.data);
    })
    .catch((err)=>{
        console.log(err);
    })
}
</script>

<style scoped>

</style>